import { Row, Col } from 'antd'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'

import TreeWrap from './components/Tree'
import TableWrap from './components/Table'
import SearchWrap from './components/SearchForm'

/** 
	 * Home组件的参数里就可以拿到 传来的loading和table空间里的state 
	 * 要注意的是 location对象 和 dispatch方法 不需要以函数的形式返回过来
	 * connect连接后的组件，在参数中会自动拥有 location对象 和 dispatch方法
	*/
const Home = ({
	location, dispatch, loading, table,
}) => {
	let { treeData, selectedKeys, tableData, pageState } = table
	let { pathname, query } = location  //location对象 会存放当前页面的路由信息
	
	// *给组件TreeWrap的属性
	const TreeWrapProps = {
		treeData,
		selectedKeys,  //选中项
		// 选中监听
		onSelect: (keys) => {
			dispatch({   //dispatch方法用于执行action
				type: 'table/onTreeSelect',
				payload: keys,
			})
		},
	}

	// *给组件TableWrap的属性
	const TableWrapProps = {
		//你的loading需要作用于哪个effects里的方法 给予格式： effects[空间名/方法名]
		loading: loading.effects['table/queryTable'],
		tableData,
		rowKey: "userId",
		/** checkbox选择监听 */
		rowSelection: {
			// 选择改变事件
			onChange: (selectedRowKeys, selectedRows) => {
      	console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
			},
			// 全/反选事件
    	onSelectAll: (selected, selectedRows, changeRows) => {
      	console.log(`selected: ${selected}`, `selectedRows: ${selectedRows}`, 'changeRows: ', changeRows)
    	},
		},
		/** 表格编辑 */
		operation: {
			// 编辑
			editFun: (userId, record) => {
				dispatch({
					type: 'table/edit',
					payload: { userId, record },
				})
			},
			// 删除
			deleteFun: (userId) => {
				dispatch({
					type: 'table/delete',
					payload: userId,
				})
			},
		},
		/** 分页 */
		pagination: {
			defaultCurrent: query.page,
			total: pageState.total,
			onChange: (page, pageSize) => {
				//需用dispatch 路由push
				dispatch(routerRedux.push({
					pathname,
					query: {
						...query,
						page,
						pageSize,
					},
				}))
			},
			onShowSizeChange: (page, pageSize) => {
				//需用dispatch 路由push
				dispatch(routerRedux.push({
					pathname,
					query: {
						...query,
						page,
						pageSize,
					},
				}))
			},
		},
	}

	// *给组件SearchWrap的属性
	const SearchWrapProps = {
		// 新增提交
		addOKFun: (values) => {
			dispatch({
				type: 'table/add',
				payload: values,
			})
		},
		// 搜索提交
		searchFun: (payload) => {
			dispatch({
				type: 'table/filter',
				payload,
			})
		},
	}
	// 返回的最终页面
	return (
		<div>
			<Row gutter={16}>
      	<Col span={6}>
      	  <TreeWrap {...TreeWrapProps} />  {/* 侧边树组件 */}
      	</Col>
      	<Col span={18}>
					<SearchWrap { ...SearchWrapProps }/>  {/* 上部表单集合组件 */}
					<TableWrap {...TableWrapProps} />   {/* 下部表格组件 */}
      	</Col>
      </Row>
		</div>
	)
}

/** 
 * 通过connect方法连接组件Home后 会把全局state以函数的形式返回给Home组件
 * 全局state里面有 放置好的loading、每个局部state等等
 * 将Home组件需要的东西在mapStateToProps函数里返回就可以给到Home组件
 */
function mapStateToProps (state) {
	// console.log(state)
	const { table, loading } = state
  return {
		table,
		loading,
  }
}
export default connect(mapStateToProps)(Home)